<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2021/11/8
  Time: 10:10
  To change this template use File | Settings | File Templates.
--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户分析</title>
    <script type="text/javascript" src="/bigScreen/js/jquery.js"></script>
    <link rel="stylesheet" href="/bigScreen/css/comon0.css">
</head>
<script type="text/javascript">
    $(document).ready(function(){
        var html=$(".wrap ul").html()
        $(".wrap ul").append(html)
        var ls=$(".wrap li").length/2+1
        i=0
        ref = setInterval(function(){
            i++
            if(i==ls){
                i=1
                $(".wrap ul").css({marginTop:0})
                $(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
            }
            $(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)


        },2400);



        var html2=$(".adduser ul").html()
        $(".adduser ul").append(html2)
        var ls2=$(".adduser li").length/2+1
        a=0
        ref = setInterval(function(){
            a++
            if(a==ls2){
                a=1
                $(".adduser ul").css({marginTop:0})
                $(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
            }
            $(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)


        },4300);








    })
</script>
<body>
<div class="loading">
    <div class="loadbox"> <img src="/bigScreen/images/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
    <h1><img src="/bigScreen/images/logo1.png">用户分析</h1>
    <div class="weather"><img src="/bigScreen/images/weather.png"><span>${weather}</span><span></span></div>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 2.5rem">
                <div class="alltitle">用户情况</div>

                <div class="sycm">
                    <ul class="clearfix">
                        <li><h2>${userCount.get(1)}</h2><span>今日新增人员</span></li>
                        <li><h2>${userCount.get(0)}</h2><span>总共人员</span></li>
                        <li><h2>${String.format("%.2f",userCount.get(1)*1.0/userCount.get(0)*100+"")}%</h2><span>人员增长</span></li>
                    </ul>
                    <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>


                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 2.65rem">
                <div class="alltitle">男女占比</div>
                <div class="sy" id="echarts1"></div>
                <div class="sy" id="echarts2"></div>
                <div class="sy" id="echarts3"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 2.95rem">
                <div class="alltitle">地址区分比例</div>
                <div id="echarts4" style="height: 2.2rem; width: 100%;"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter">${nowUserCount}</li>
                        <li class="pulll_left counter">${userCount.get(0)}</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">系统在线人数</li>
                        <li class="pulll_left">系统总人数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="map1"><img src="/bigScreen/images/lbx.png"></div>
                <div class="map2"><img src="/bigScreen/images/jt.png"></div>
                <div class="map3"><img src="/bigScreen/images/map.png"></div>
                <div class="map4" id="map_1"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height:5.2rem">
                <div class="alltitle">新增吐槽信息</div>
                <div class="tabs">
                    <ul class="clearfix">
                        <!--
                        <li><a class="active" href="#">7天</a></li>
                        <li><a href="#">15天</a></li>
                        <li><a href="#">30天</a></li>
                        -->
                    </ul>
                </div>
                <div class="clearfix">
                    <div class="sy" id="echarts6"></div>
                    <div class="sy" id="echarts7"></div>
                    <div class="sy" id="echarts8"></div>
                </div>
                <div class="addnew">
                    <div class="tit02"><span>今日新增吐槽纪录</span></div>
                    <div class="adduser">
                        <ul class="clearfix">


                            <c:forEach items="${emotionList}" var="emo">
                            <li class="clearfix"> <span class="pulll_left"><img src="/bigScreen/images/head1.png">${emo.id}-${emo.username}</span> <span class="pulll_right">${emo.con} </span> </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.4rem">
                <div class="alltitle">测试年龄记录</div>
                <div class="wrap">
                    <ul>
                        <c:forEach items="${preLifeList}" var="life">
                        <li>
                            <p>${life.id} ${life.username} 测试年龄结果：${life.age}岁----${life.dates}</p>
                        </li>
                        </c:forEach>
                    </ul>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>

</div>
<div class="back"></div>
<script language="JavaScript" src="/bigScreen/js/js.js"></script>
<script type="text/javascript" src="/bigScreen/js/echarts.min.js"></script>
<script type="text/javascript" src="/bigScreen/js/china.js"></script>
<script type="text/javascript" src="/bigScreen/js/area_echarts.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart6.resize();
        myChart7.resize();
        myChart8.resize();
    })
    window.addEventListener("resize", function () {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
        myChart6.resize();
        myChart7.resize();
        myChart8.resize();
    });
</script>
<script type="text/javascript">
    var v0 = ${emotionCount.get(0)}; //总的
    var v1 = ${emotionCount.get(1)}; //今天
    var v2 = ${emotionCount.get(2)};// 昨天
    var v3 = 68;



    var myChart6 = echarts.init(document.getElementById('echarts6'));
    option6 = {
        series: [{
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#0088cc',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: v0,
                name: '总的吐槽纪录',
                label: {
                    normal: {
                        formatter: v0 + '',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        }
                    }
                }
            },
                {
                    value: v0,
                    name: '总纪录',
                    label: {
                        normal: {
                            formatter: function (params) {

                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
        }]

    };

    var myChart7 = echarts.init(document.getElementById('echarts7'));
    option7 = {
        series: [{
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#fccb00',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: v1,
                name: '今日新增吐槽纪录',
                label: {
                    normal: {
                        formatter: v1 + '',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        }
                    }
                }
            },
                {
                    value: v1,
                    name: '今日新增吐槽纪录',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v1 / v0 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
        }]
    };


    var myChart8 = echarts.init(document.getElementById('echarts8'));
    option8 = {


        series: [{

            type: 'pie',
            radius: ['70%', '80%'],
            color: '#62b62f',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: v2,
                name: '昨日新增吐槽纪录',
                label: {
                    normal: {
                        formatter: v2 + '',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        }
                    }
                }
            }, {
                value: v0,
                name: '昨日新增吐槽纪录',
                label: {
                    normal: {
                        formatter: function (params) {
                            return '占比' + Math.round(v2 / v0 * 100) + '%'
                        },
                        textStyle: {
                            color: '#aaa',
                            fontSize: 12
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,.2)'
                    },
                    emphasis: {
                        color: '#fff'
                    }
                },
            }]
        }]
    };
    setTimeout(function () {
        myChart6.setOption(option6);
        myChart7.setOption(option7);
        myChart8.setOption(option8);
    }, 500);

</script>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('echarts1'));

    // $.post("/admin/")


    var v1 = 298;
    var v2 = 523;
    var v3 = v1 + v2;
    option1 = {


        series: [{
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#0088cc',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: v1,
                name: '总人数',
                label: {
                    normal: {
                        formatter: ${userCount.get(0)} + '',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        }
                    }
                }
            },
            ]
        }]
    };


    var myChart3 = echarts.init(document.getElementById('echarts3'));
    var v1 = ${sexCount.get(0)}
    var v2 = ${sexCount.get(1)}
    var v3 = ${userCount.get(0)}
    option2 = {


        series: [{
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#fccb00',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: v1,
                name: '男性',
                label: {
                    normal: {
                        formatter: v1 + '',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        }
                    }
                }
            }, {
                value: v2,
                name: '女性',
                label: {
                    normal: {
                        formatter: function (params) {
                            return '占比' + Math.round(v1 / v3 * 100) + '%'
                        },
                        textStyle: {
                            color: '#aaa',
                            fontSize: 12
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,.2)'
                    },
                    emphasis: {
                        color: '#fff'
                    }
                },
            }]
        }]
    };


    var myChart2 = echarts.init(document.getElementById('echarts2'));
    option3 = {


        series: [{

            type: 'pie',
            radius: ['70%', '80%'],
            color: '#62b62f',
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: v2,
                name: '女性',
                label: {
                    normal: {
                        formatter: v2 + '',
                        textStyle: {
                            fontSize: 20,
                            color: '#fff',
                        }
                    }
                }
            }, {
                value: v1,
                name: '男性',
                label: {
                    normal: {
                        formatter: function (params) {
                            return '占比' + Math.round(v2 / v3 * 100) + '%'
                        },
                        textStyle: {
                            color: '#aaa',
                            fontSize: 12
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,.2)'
                    },
                    emphasis: {
                        color: '#fff'
                    }
                },
            }]
        }]
    };
    setTimeout(function () {
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
    }, 500);

</script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('echarts4'));
    // var plantCap = [{
    //     name: '工业',
    //     value: '222'
    // }, {
    //     name: '农业',
    //     value: '115'
    // }, {
    //     name: '互联网',
    //     value: '113'
    // }, {
    //     name: '医疗',
    //     value: '95'
    // }, {
    //     name: '文学',
    //     value: '92'
    // }, {
    //     name: '服装',
    //     value: '87'
    // }];

    var plantCap = ${addressCount};
    console.log(plantCap,${addressCount});




    var datalist = [{
        offset: [56, 48],
        symbolSize: 110,

        color: 'rgba(73,188,247,.14)',

    }, {

        offset: [30, 70],
        symbolSize: 70,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [0, 43],
        symbolSize: 60,
        color: 'rgba(73,188,247,.14)'

    }, {
        offset: [93, 30],
        symbolSize: 70,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [26, 19],
        symbolSize: 65,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [75, 75],
        symbolSize: 60,
        color: 'rgba(73,188,247,.14)'

    }];

    var datas = [];
    for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i];
        var itemToStyle = datalist[i];
        datas.push({
            name: item.value + '\n' + item.name,
            value: itemToStyle.offset,
            symbolSize: itemToStyle.symbolSize,
            label: {
                normal: {
                    textStyle: {
                        fontSize: 14
                    }
                }
            },

            itemStyle: {
                normal: {
                    color: itemToStyle.color,
                    opacity: itemToStyle.opacity
                }
            },
        })
    }
    option = {
        grid: {
            show: false,
            top: 10,
            bottom: 10
        },

        xAxis: [{
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
        }],

        yAxis: [{
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30
        }],
        series: [{
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
                normal: {
                    show: true,
                    formatter: '{b}',
                    color: '#FFF',
                    textStyle: {
                        fontSize: '30'
                    }
                },
            },
            itemStyle: {
                normal: {
                    color: '#F30'
                }
            },
            data: datas
        }]

    };
    myChart.setOption(option);
    $(document).ready(function () {
        myChart.resize();

    })
    window.addEventListener("resize", function () {
        myChart.resize();
    });
</script>
<script type="text/javascript" src="/bigScreen/js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="/bigScreen/js/jquery.countup.min.js"></script>
<script type="text/javascript">
    $('.counter').countUp();
</script>

</body>
</html>

